<script lang="ts">
import { reactive, ref, toRaw, type UnwrapRef } from 'vue'
import Menu from '../components/icons/Menu.vue'
import type { UploadProps } from 'ant-design-vue'
import { PlusOutlined } from '@ant-design/icons-vue'

interface FormState {
  title: string,
  desrciption: string,
}

function getBase64(file: File) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = error => reject(error)
  })
}

export default {
  components: {
    Menu,
    PlusOutlined,
  },
  setup() {

    // base form 
    const formState: UnwrapRef<FormState> = reactive({
      title: '',
      desrciption: ''
    })

    // image
    const previewVisible = ref(false)
    const previewImage = ref('')
    const previewTitle = ref('')
    const fileList = ref<UploadProps['fileList']>([])

    return {
      formState,
      previewVisible,
      previewImage,
      previewTitle,
      fileList,
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!', toRaw(this.formState))
    },
    onClear() {
      this.formState.title = ''
      this.formState.desrciption = ''
    },
    handleCancel() {
      this.previewVisible = false
      this.previewTitle = ''
    },
    // @ts-ignore
    async handlePreview(file: UploadProps['fileList'][number]) {
      if (!file.url && !file.preview) {
        file.preview = (await getBase64(file.originFileObj)) as string
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
      this.previewTitle = file.name || file.url.substring(file.url.lastIndexOf('/') + 1)
    }
  }
}
</script>

<template>
  <Menu />

  <div class="main-area">
    <div class="main-title">
      <h1>信息反馈</h1>
    </div>
    <hr />
    <div class="main-title-description">
      向我们反馈使用过程中产生的一系列问题
    </div>
    <div class="first-line">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-card>
            <a-form :model="formState" :label-col="{ style: { width: '150px' } }" :wrapper-col="{ span: 14 }">
              <a-form-item label="主题">
                <a-input v-model:value="formState.title" placeholder="简述出现的问题" />
              </a-form-item>
              <a-form-item label="描述">
                <a-textarea v-model:value="formState.desrciption" placeholder="详细描述出现的问题" :showCount="true"
                  style="height: 100px;" />
              </a-form-item>
              <a-form-item label="图片">
                <a-upload v-model:file-list="fileList" list-type="picture-card" @preview="handlePreview">
                  <div>
                    <plus-outlined />
                    <div style="margin-top: 8px">Upload</div>
                  </div>
                </a-upload>
              </a-form-item>
            </a-form>
            <div style="width: 100%; text-align: center;">
              <a-button type="primary" @click="onSubmit">提交</a-button>
              <a-button type="default" style="margin-left: 5px;" @click="onClear">清空</a-button>
            </div>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card class="welcome-connect-card">
            <div class="card-title">
              <h3>也欢迎以下方式联系我们</h3>
            </div>
            <hr>
            <div class="card-content">
              discord: xxxxxxxx <br>
              邮箱: xxxx@xxx.com <br>
              discord: xxxxxxxx <br>
              邮箱: xxxx@xxx.com <br>
              discord: xxxxxxxx <br>
              邮箱: xxxx@xxx.com <br>
              discord: xxxxxxxx <br>
              邮箱: xxxx@xxx.com <br>
              discord: xxxxxxxx <br>
              邮箱: xxxx@xxx.com <br>
              discord: xxxxxxxx <br>
              邮箱: xxxx@xxx.com <br>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.main-area {
  position: absolute;
  width: 70vw;
  height: 60vh;
  left: 15vw;
  top: 15vh;

  .main-title h1 {
    font-weight: bolder;
  }

  .main-title-description {
    color: gray;
  }

  .first-line {
    padding-inline: 5px;
    margin-top: 15px;
  }
}

.welcome-connect-card {

  .card-title {
    text-align: center;

    h3 {
      font-weight: bold;
    }
  }

  .card-content {
    margin-top: 20px;
    width: auto;
    text-align: center;
  }
}
</style>